<template>
  <div>
    <div class="title back-fff">
      {{F_EnrbatchName}}
      <!-- <span class="state">进行中</span> -->
    </div>
    <div class="flex item" v-for="(item,index) in dynamicsList" :key="index">
      <div class="dots dots-end" v-if="index+1===dynamicsList.length">{{index+1}}</div>
      <div class="dots" v-else><i class="el-icon-check icon"></i> </div>
      <div class="section flex1">
        <div class="name back-fff" style="overflow: hidden;">
          <div style="float: left;">{{item.F_PointDesc}}</div>
          <div v-if="item.F_IsPay=='1' && item.F_OrderStatus=='0'" style="float: right;">
            <el-button size="medium" type="primary" class="btns" :loading="paying" @click="toPay(item)">Click to Pay</el-button>
          </div>
        </div>

        <div class="area back-fff">
          <div class="notice-top" v-if="item.F_PointInstruction">{{item.F_PointInstruction}}</div>
          <div class="notice" v-if="item.F_Notes" style="margin-bottom:10px;">{{item.F_Notes}}</div>
          <a v-if="item.F_FilePath" :href="item.F_FilePath" :download="item.F_FileName" style="color:#2d9ef3;">{{item.F_FileName}}</a>
          <div>
            <el-button @click="toBtn(bt)" v-for="(bt,btindex) in item.btns" :key="'bts'+btindex" size="medium" :type="bt.F_ButtonName=='接受'? 'primary' : ''" class="btns">{{bt.F_ButtonName}}</el-button>
            <el-button v-if="item.F_IsUpload=='1'" @click="openUpload(item)" type="primary" class="btns">Upload</el-button>
          </div>
        </div>
      </div>
    </div>
    <BaseNull v-if="BaseNull" />
    <!-- <div class="flex item">
            <div class="dots">2</div>
            <div class="section flex1">
                <div class="name back-fff">参加选拔考试缴费</div>
                <div class="area back-fff">
                    <div class="notice">资料审核通过！</div>
                    <el-button size="medium" type="primary" class="btns">查看申请表单</el-button>
                </div>
            </div>
        </div>
        <div class="flex item">
            <div class="dots">3</div>
            <div class="section flex1">
                <div class="name back-fff">选拔结果</div>
                <div class="area back-fff">
                    <div class="notice">
                        此申请为你本人的申请，应当完全由你自己独立完成。若无法达到此项要求，你此次的申请将被拒绝，你也会失去
                        将来再次申请的资格。若在收到UWC录取通知后被确认在申请时曾有过不当的帮助，你的录取决定将被取消，在
                        UWC的席位也将被撤回。
                    </div>
                    <div>
                        <el-button size="medium" type="primary" class="btns">接受候补</el-button>
                        <el-button size="medium" class="btns">暂不接受</el-button>
                    </div>
                </div>
            </div>
        </div> -->

    <el-dialog title="付费" :visible.sync="UWCPayVisible" :destroy-on-close="true" width="80%" top="10px" :lock-scroll="true" @closed="UWCPayClosed">
      <iframe :src="UWCPayUrl" width="100%" height="800px" style="border:0;"></iframe>
    </el-dialog>
  </div>
</template>
<script>
import {
  EnrollmentDynamics,
  EnrollmentDynamicButton,
  FlowConfirmApi,
} from "@/api/activity";

import api from "@/network/api";
import to from "await-to-js";
import { checkResponse } from "@/network/vertify";

import { tryJson } from "@/utils/json";

const { UWCPay, uwclist } = api;

const uwclistAsync = async (params) => {
  var [err, response] = await to(uwclist(params));
  if (err) return;

  return response;
};

export default {
  data() {
    return {
      F_StudentPoolId: this.$route.query.F_StudentPoolId,
      F_EnrbatchName: this.$route.query.F_EnrbatchName,
      F_SchemeInfoId_File: this.$route.query.F_SchemeInfoId_File,
      GroupId: this.$route.query.GroupId,
      F_ActivityId: this.$route.query.F_ActivityId,
      userId: this.$store.state.userId,
      dynamicsList: [],
      BaseNull: false,

      paying: false,
      windowsOpenLoop: null,
      UWCPayVisible: false,
      UWCPayUrl: "",
    };
  },
  mounted() {
    if (this.windowsOpenLoop) clearInterval(this.windowsOpenLoop);
    this.init();
  },
  destroyed() {
    if (this.windowsOpenLoop) clearInterval(this.windowsOpenLoop);
  },
  methods: {
    UWCPayClosed() {
      URL.revokeObjectURL(this.UWCPayUrl);
      this.EnrollmentDynamicsInvoke();
    },
    async toPay(item) {
      this.paying = true;
      const [err, response] = await to(UWCPay({ OrderId: item.F_OrderId }));
      var [state, data] = checkResponse(err, response);
      if (!state) return void (this.paying = false);

      var [rightJson, data] = tryJson(data);
      if (!rightJson)
        return void ((this.paying = false), alert("返回数据格式错误"));

      var blob = new Blob([await uwclistAsync(data)], { type: "text/html" });
      var url = URL.createObjectURL(blob);

      this.UWCPayUrl = url;
      this.UWCPayVisible = true;

      this.paying = false;
    },
    init() {
      if (!this.F_StudentPoolId) return;
      this.EnrollmentDynamicsInvoke();
    },
    EnrollmentDynamicsInvoke() {
      EnrollmentDynamics({
        F_StudentPoolId: this.F_StudentPoolId,
      }).then((res) => {
        this.dynamicsList = res.data.Data || [];
        this.BaseNull = this.dynamicsList.length === 0;
        this.dynamicsList.forEach((item, index) => {
          if (item.F_Status != "1") return;
          EnrollmentDynamicButton({
            F_FlowId: item.F_FlowId, //'FC694AFF-18DD-45DB-91AF-070D1958C985'
          }).then((res) => {
            item.btns = res.data.Data || [];
            this.$set(this.dynamicsList, index, item);
          });
        });
      });
    },
    openUpload(item) {
      var url =
        "/Website/customForm/form?formid=" +
        item.F_SchemeInfoId_File +
        "&groupId=" +
        this.GroupId +
        "&F_ActivityId=" +
        this.F_ActivityId;

      if (item.F_Status != "1") url += "&onlyView=1";

      var windowsOpen = window.open(url, "_blank");
      if (this.windowsOpenLoop) clearInterval(this.windowsOpenLoop);
      this.windowsOpenLoop = setInterval(() => {
        //监听子页面关闭事件
        if (windowsOpen.closed) {
          clearInterval(this.windowsOpenLoop);
          this.EnrollmentDynamicsInvoke();
        }
      }, 800);
    },
    // 按钮点击
    toBtn(item) {
      FlowConfirmApi({
        F_StudentPoolId: this.F_StudentPoolId,
        F_FlowId: item.F_FlowId,
        F_ButtonId: item.F_ButtonId,
        F_UserId: this.userId,
        F_CheckRemark: item.F_ButtonName,
      }).then((res) => {
        this.$message.success({ message: res.data.msg });
        setTimeout(() => {
          location.reload();
        }, 800);
      });
    },
  },
};
</script>
<style scoped lang="scss">
.title {
  font-size: 16px;
  line-height: 50px;
  border-left: 6px solid #2d9ef3;
  padding-left: 21px;
  position: relative;
  margin-bottom: 10px;
}
.state {
  position: absolute;
  right: 5px;
  width: 65px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  top: 10px;
}
.dots {
  width: 80px;
  height: 60px;
  background-color: #cccccc;
  text-align: center;
  line-height: 60px;
  font-size: 24px;
  .icon {
    font-size: 35px;
    line-height: 60px;
    color: #fff;
  }
}
.dots-end {
  background-color: #03b615;
  color: #fff;
}
.section {
  .name {
    line-height: 60px;
    padding: 0 20px;
    font-size: 16px;
  }
  .area {
    padding: 20px;
    margin-top: 5px;
    .notice-top {
      margin-bottom: 15px;
      color: #aaaaaa;
    }
    .notice {
      padding: 17px 20px;
      background-color: rgba(45, 158, 243, 0.1);
      color: #2d9ef3;
    }
    .btns {
      margin-top: 15px;
    }
  }
}
.item {
  margin-top: 5px;
}
</style>